<template>
  <div class="container">
    <div>
      <el-row :gutter="12">
        <el-col :span="6">
          <el-form ref="form" :model="form">
            <el-form-item label="开始日期：">
              <el-date-picker
                v-model="form.StartDate"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6">
          <el-form ref="form" :model="form">
            <el-form-item label="结束日期：">
              <el-date-picker
                v-model="form.EndDate"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6">
          <el-form ref="form" :model="form" style="float: left">
            <el-button size="mini" type="primary" @click="getlistdata"
              >查 询</el-button
            >
            <!-- <el-button size="mini" type="success" @click="exportExcel">导 出</el-button> -->
          </el-form>
        </el-col>
      </el-row>
    </div>
    <el-table
      v-loading="loading"
      :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
      highlight-current-row
      border
      @cell-mouse-enter="cellMouseEnter"
    >
      <!-- <el-table-column
        prop="ID"
        label="序号"
        align="center"
      ></el-table-column> -->
      <!-- <el-table-column
        prop="详情描述"
        label="详情描述"
        align="center"
        width="150"
      ></el-table-column> -->
      <el-table-column
        prop="上报人"
        label="上报人"
        align="center"
        width="150"
      ></el-table-column>
      <el-table-column
        prop="上报时间"
        label="上报时间"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="标题"
        label="标题"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="详情描述"
        label="详情描述"
        align="center"
        width="250"
      ></el-table-column>
      <el-table-column label="图片"  align="center" >
        <template slot-scope="scope">
          <el-image
            style="width: 40px; height: 40px; margin-top: 12px;"
            :src="scope.row.PHOTO1"
            @click="bigImage(scope.row)"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column label="播放" >
        <template slot-scope="scope">
          <el-button v-if="scope.row.RecordPath"
            type="text"
            icon="el-icon-headset"
            @click="openRecording(scope.$index, scope.row)"
            >播放录音</el-button
          >
          <el-button v-if="scope.row.视频"
            type="text"
            icon="el-icon-video-play"
            @click="playVideo(scope.$index, scope.row)"
            >播放视频</el-button
          >
        </template>
      </el-table-column>
      
       <el-table-column
        prop="结案状态"
        label="状态"
        align="center"
      ></el-table-column>
      <el-table-column label="操作"  align="center" width="350">
        <template slot-scope="scope">
          <el-button type="text" @click="handleAdd(scope.$index, scope.row)" v-if="scope.row.结案状态=='未结案'"
            >调度指导</el-button
          >
          <el-button type="text" @click="guidanceRecord(scope.$index, scope.row)"
            >指导记录</el-button
          >
          <el-button type="text" @click="rectificationRecord(scope.$index, scope.row)"
            >结果反馈</el-button
          >
          <el-button type="text" @click="updateFinishWorkerDispose(scope.$index, scope.row)"  v-if="scope.row.结案状态=='未结案'"
            >结案</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="tableData.length"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
      ></el-pagination>
    </div>
    <el-dialog
      标题="图片展示"
      :visible.sync="showBigDialogVisible"
      width="23.438vw"
    >
      <el-carousel :interval="5000" arrow="always">
        <el-carousel-item v-for="item in imageList" :key="item">
          <img :src="item" style="height: 36.458vw; width: 100%" alt="图片丢失了" />
        </el-carousel-item>
      </el-carousel>
    </el-dialog>
    <el-dialog
      标题="视频展示"
      :visible.sync="showVideoDialogVisible"
      width="23.438vw"
    >
      <video
        id="videoSource"
        style="width: 100%; height: 500px"
        :src="视频"
        controls="controls"
      >
        您的浏览器不支持 video 标签。
      </video>
      <!-- <video :ref="'videoPlayer' + index" :controls="isIn">
        <source :src="item.src" type="video/mp4" />
        您的浏览器不支持Video标签。
      </video>
      <i
        v-show="!isPlay"
        class="play-btn el-icon-video-play"
        @click="playVideo"
      ></i>
      <i
        v-show="isPlay && isIn"
        class="play-btn el-icon-video-pause"
        @click="pauseVideo"
      ></i> -->
    </el-dialog>

    <!-- 指导记录 -->
    <el-dialog 标题="指导记录" :visible.sync="showGuidanceVisible">
      <div>
        <el-tabs type="border-card" style="min-height: 350px">
            <el-table :data="commandData" style="width: 100%"  border @cell-mouse-enter="cellMouseEnter">
              <el-table-column prop="调度对象" label="调度对象" align="center"></el-table-column>
              <el-table-column prop="调度内容" label="调度内容" align="center"></el-table-column>
              <el-table-column prop="调度时间" label="调度时间" align="center"></el-table-column>
              <!-- <el-table-column  label="调度对象" align="center" width="270px">
                <template slot-scope="scope">
                  <el-popover trigger="click" placement="top">
                    <p>{{ scope.row.WORKERNAME }}</p>
                    <div slot="reference" class="name-wrapper">
                      <el-tag effect="dark">{{ scope.row.WORKERNAME }}</el-tag>
                    </div>
                  </el-popover>
                </template>
              </el-table-column>
              <el-table-column label="调度车辆" align="center" width="270px">
                <template slot-scope="scope">
                  <el-popover trigger="click" placement="top">
                    <p>{{ scope.row.CARNAME }}</p>
                    <div slot="reference" class="name-wrapper">
                      <el-tag effect="dark">{{ scope.row.CARNAME }}</el-tag>
                    </div>
                  </el-popover>
                </template>
              </el-table-column>
              <el-table-column  label="指导内容" align="center" width="270px">
                <template slot-scope="scope">
                  <el-popover trigger="click" placement="top" >
                    <p > {{ scope.row.DETAIL }}</p>
                    <div slot="reference" class="name-wrapper">
                      <el-tag effect="dark">{{ scope.row.DETAIL }}</el-tag>
                    </div>
                  </el-popover>
                </template>
              </el-table-column> -->
            </el-table>
        </el-tabs>
      </div>
    </el-dialog>
    <!-- 反馈记录 -->
    <el-dialog 标题="反馈记录" :visible.sync="showRecordVisible">
      <div>
        <el-tabs type="border-card" style="min-height: 350px">
            <el-table :data="rectificationData" style="width: 100%"  border @cell-mouse-enter="cellMouseEnter">
              <el-table-column prop="标题" label="标题" align="center"></el-table-column>
              <el-table-column prop="详情描述" label="详情描述" align="center" width="270px"></el-table-column>
              <el-table-column prop="反馈时间" label="反馈时间" align="center" width="170px"></el-table-column>
              <el-table-column label="图片"  align="center">
                <template slot-scope="scope">
                  <el-image
                    style="width: 40px; height: 40px; margin-top: 12px;"
                    :src="scope.row.PHOTO1"
                    @click="bigImage(scope.row)"
                  ></el-image>
                </template>
              </el-table-column>
               <!-- <el-table-column
                prop="STATUS"
                label="状态"
                align="center"
              ></el-table-column> -->
              <el-table-column label="播放" width="250">
                <template slot-scope="scope">
                  <el-button v-if="scope.row.RecordPath"
                    type="text"
                    icon="el-icon-headset"
                    @click="openRecording(scope.$index, scope.row)"
                    >播放录音</el-button
                  >
                  <el-button v-if="scope.row.视频"
                    type="text"
                    icon="el-icon-video-play"
                    @click="playVideo(scope.$index, scope.row)"
                    >播放视频</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
        </el-tabs>
      </div>
    </el-dialog>

    <!-- 添加指导 -->
    <el-dialog
      :标题="addDialogtitle"
      :visible.sync="isVisibleEdit"
      width="50%"
    >
      <el-form ref="form" :model="form" label-width="5.729vw" >
        <el-form-item label="调度类型：">
              <el-select v-model="form.type" placeholder="请选择" @change="getWorkerDisposeDeal">
                <el-option
                  v-for="item in typeList"
                  :key="item.label"
                  :label="item.label"
                  :value="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
        
        <el-form-item label="调度对象：" >
          <el-select v-model="form.team" placeholder="请选择"  @change="getWorkerDisposPHONE">
                <el-option
                  v-for="item in clientList"
                  :key="item.NAME"
                  :label="item.NAME"
                  :value="item.NAME"
                  
                ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="联系方式：" >
          <el-select v-model="form.car" placeholder="请选择"  >
                <el-option
                  v-for="item in clientList"
                  :key="item.PHONE"
                  :label="item.PHONE"
                  :value="item.PHONE"
                  
                ></el-option>
          </el-select>
        </el-form-item>
        
        <el-form-item label="指导内容：">
          <el-input  type="textarea" maxlength="30" :autosize="{minRows: 2}" show-word-limit :rows="9" v-model="form.guidance" placeholder="请输入" class="handle-input mr10" style="width: 37.5vw;border: 1px solid #a4aca7;" >
          </el-input>
        </el-form-item>
      </el-form>
      
      <span slot="footer" class="dialog-footer">
        <el-button @click="isVisibleEdit = false">取 消</el-button>
        <el-button type="primary" @click="addCommand()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import '@/assets/css/common.css'
import { formatDate } from '@/common/js/date.js'

import export2Excel from '@/utils/exportExcel/index.js'
import BenzAMRRecorder from 'benz-amr-recorder'
export default {
  data () {

    return {
      currentPage: 1, //初始页
      pageSize: 10,    //    每页的数据
      srcBig: '',
      imageList: [],
      playRec: null,
      视频: '',
      showBigDialogVisible: false,
      showVideoDialogVisible: false,
      showRecordVisible: false,
      showGuidanceVisible: false,
      isVisibleEdit: false,
      isVisibleEdit1: false,
      form: {
        groupingList: [],
        groupingValue: '',
        cphList: [],//车牌号列表
        guidance: '',
        alermTypeList: [{ label: '1分钟', value: '1' }, { label: '5分钟', value: '5' }, { label: '10分钟', value: '10' }, { label: '30分钟', value: '30' }],
        alermTypeValue: '5',
        StartDate: formatDate(new Date(new Date().getTime() - 3600 * 1000 * 24), 'yyyy-MM-dd'),
        EndDate: formatDate(new Date(new Date().getTime() + 3600 * 1000 * 24), 'yyyy-MM-dd'),
        name:"",
        PeopleNumber: '1',
        VehicleNumber: '0',
        team:"",
        car:"",
      },
      clientList: [],
      type: '',
      typeList: [{ label:'车队长'},{ label:'班组长'},{ label:'公厕维保员'}],
      teamList: [],
      carteam: '',
      carteamList: [],
      carList: [],
      car:[],
      team:[],
      originalData: [],
      tableData: [],
      commandData:[],
      rectificationData:[],
      loading: false,
      URLByTYPE: '',
      // dxlist:[{
      // dxcar: '',
      // dxteam: '',}],
      dxcar: [],
      dxteam: [],
      
    }
  },
  created () {
  },
  mounted () {
    if (localStorage.getItem('CurrentService') === '001') {
      this.URLByTYPE = 'Vehicle'
    }
    if (localStorage.getItem('CurrentService') === '003') {
      this.URLByTYPE = 'RubbishVehicle'
    }
    this.getlistdata()
    // this.getcommandData()
    // this.getGroupingList()
  },
  methods: {
    async getlistdata () {
      this.currentPage = 1;
      this.loading = true
      var url = 'Worker/GetFeedbackInfoGZ?ClientNo=' + localStorage.getItem('CLIENT_NO') + '&startDate=' + this.form.StartDate + '&endDate=' + this.form.EndDate
      const { data } = await this.$Http.get(url)
      // 原始数据
      this.tableData = data
      this.loading = false

    },
    //获取调度对象
    async getWorkerDisposeDeal () {
      const { data } = await this.$Http.get('Worker/GetWorkerDisposeDealSelect?ClientNo=' + localStorage.getItem('CLIENT_NO')+ '&type=' + this.form.type)
      this.clientList = data
    },
    //获取调度对象联系方式
    async getWorkerDisposPHONE () {
      if (this.form.team) this.clientList = this.clientList.filter(item => this.form.team === item.NAME)
    },
    // 获取指导记录
    async getcommandData () {
      const { data } = await this.$Http.get('Worker/GetWorkerDisposeDeal?ID='+ this.form.ID)
      this.originalData = data
      this.screeningData()
    },
    // 获取反馈记录
    async getrectificationData () {
      const { data } = await this.$Http.get('Worker/GetWorkerDispose?ID='+ this.form.ID)
      this.rectificationData = data
    },
    // 指导记录查询
    screeningData(){
      this.currentPage = 1;
      this.commandData = this.originalData
      console.log(this.commandData)
      // if (this.form.name) this.commandData = this.commandData.filter(item => item.NAME.includes(this.form.name))
    },
    // 放大图片
    bigImage (row) {
      // this.srcBig = row.PHOTO1
      this.imageList = []
      if (row.PHOTO1 != '') {
        this.imageList.push(row.PHOTO1)
      }
      if (row.PHOTO2 != '') {
        this.imageList.push(row.PHOTO2)
      }
      if (row.PHOTO3 != '') {
        this.imageList.push(row.PHOTO3)
      }
      if (row.PHOTO4 != '') {
        this.imageList.push(row.PHOTO4)
      }
      if (row.PHOTO5 != '') {
        this.imageList.push(row.PHOTO5)
      }
      if (row.PHOTO6 != '') {
        this.imageList.push(row.PHOTO6)
      }
      if (row.PHOTO7 != '') {
        this.imageList.push(row.PHOTO7)
      }
      if (row.PHOTO8 != '') {
        this.imageList.push(row.PHOTO8)
      }
      if (row.PHOTO9 != '') {
        this.imageList.push(row.PHOTO9)
      }
      this.showBigDialogVisible = true
    },
    playRecord (index, row) {
      var recordPath = row.RecordPath
      var player = $('<amr src="' + recordPath + '"  crossOrigin="anonymous"></amr>')
      player = new amrEvent($(player));
      player && player.play(function (playing) {
        console.log("current player playing ?? " + playing)
      })
    },
    //播放语音
    openRecording (index, row) {
      let url = row.RecordPath
      // let url = _url.split('.com')[1]
      let vm = this
      if (vm.playRec !== null) {
        vm.stopPlayVoice()
      }
      vm.playRec = new BenzAMRRecorder()
      //⚠️注意跨域问题
      vm.playRec.initWithUrl('/record' + url).then(function () {
        vm.voiceActive = index
        vm.playRec.play()
        vm.playRec.onEnded(function () {
          vm.voiceActive = null
        })
      }).catch((e) => {
        console.log(e)
        vm.$message.error('播放录音失败')
      })
    },
    //停止播放
    stopPlayVoice () {
      if (this.playRec.isPlaying()) {
        this.playRec.stop()
      }
    },
    playVideo (index, row) {
      if (row.视频 != '' && row.视频 != null) {
        this.视频 = row.视频
        this.showVideoDialogVisible = true;
      } else {
        this.$message.error('未上传视频')
      }

    },
    // 分页导航
    handlePageChange (currentPage) {
      this.currentPage = currentPage;
      // console.log(this.currentPage)
      // this.$set(this.query, 'pageIndex', val);
      // this.getData();
    },
    handleSizeChange (size) {
      this.pageSize = size;
      console.log(this.pageSize)
    },
    
    // 打开反馈记录
    rectificationRecord (index,row) {
      this.form = Object.assign({},this.form, row);
      this.showRecordVisible = true
      this.getrectificationData()
    },
    // 打开指导记录
    guidanceRecord (index,row) {
      this.form = Object.assign({},this.form, row);
      this.showGuidanceVisible = true
      this.getcommandData()
    },
    // 打开添加指导窗口
    handleAdd (index, row) {
      this.form = Object.assign({}, row);
      this.dxcar =  Object.assign([]);
      this.dxteam =  Object.assign([]);
      this.addDialogtitle = '调度指导'
      //展示窗口
      this.isVisibleEdit = true;
      // this.idEdit = false;
    },
    // 下发指导
    async addCommand () {
      const params = {
        ID: this.form.ID,
        NAME: this.form.team,
        DETAIL: this.form.guidance,
        PHONE: this.form.car,
      }
      console.log('下发指令：')
      console.log(params)
      const { data } = await this.$Http.get('Worker/AddCommandGZ', { params })
      if (data.IsSucess) {
        this.$message.success('下发指导成功')
        this.isVisibleEdit = false
      } else {
        this.$message.error('下发指导成功失败');
      }
    },
    // 结案
    async updateFinishWorkerDispose (index,row) {
        const confirmResult = await this.$confirm('确定结案？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err => err)
        if (confirmResult == 'confirm') {
          const params = {
            ID: row.ID,
          }
          const { data } = await this.$Http.get('Worker/updateFinishWorkerDispose', { params })
          if (data.IsSucess) {
            this.$message.success('结案成功')
            this.isVisibleEdit = false
            this.getlistdata()
          }else {
            this.$message.error('结案失败');
          }
        }else{
          this.$message.info('取消结案')
          this.isVisibleEdit = false
        }
    },

    // 鼠标进入单元格显示其内容
    cellMouseEnter (row, column, cell, event) {
      cell.setAttribute('title', cell.innerText)
    },
    // 选择某一个下拉框
    selectCar(){
      // this.dxlist.dxteam =  this.form.team
      // this.dxlist.dxcar =  this.form.car
      this.dxteam =  this.form.team
      this.dxcar =  this.form.car
    },
  }
}
</script>
<style>
.content {
  overflow-y: scroll;
}
.el-col-6 {
  width: 350px;
  min-height: 50px;
}
.el-table th {
  height: 40px;
}
.el-form-item label {
  width: 80px;
}

</style>